import React, {Component} from 'react';
import TodoList from './todo-list/index'
import AddTodo from './add-todo/index'
import Footer from './footer/index'
import {VisibilityFilters} from '../store/action-types'
import './TodoApp.css';

const {SHOW_COMPLETED, SHOW_UNCOMPLETED} = VisibilityFilters;

/**
 * 这是个todo list
 */
class TodoApp extends Component {
    render() {
        const {
            todos,
            filter,
            onDeleteTodo,
            onAddTodo,
            onToggleTodo,
            onToggleAll,
            onChangeTodo,
            onClearCompletedTodo,
            onChangeVisibilityFilter
        } = this.props;
        const obj_todos = {
            SHOW_ALL: todos,
            SHOW_COMPLETED: todos.filter(todo => todo.completed === true),
            SHOW_UNCOMPLETED: todos.filter(todo => todo.completed === false)
        };
        console.log("test:"+obj_todos.SHOW_UNCOMPLETED.length===0);
        return (
            <div className="App">
                <h1>todos</h1>
                <AddTodo
                    isAllCompleted={obj_todos[SHOW_UNCOMPLETED].length === 0}
                    onAddTodo={onAddTodo}
                    onToggleAll={onToggleAll}/>
                <TodoList todos={obj_todos[filter]}
                          onDeleteTodo={onDeleteTodo}
                          onToggleTodo={onToggleTodo}
                          onChangeTodo={onChangeTodo}/>
                {todos.length > 0 && <Footer
                    filter={filter}
                    activeItems={obj_todos[SHOW_UNCOMPLETED].length}
                    completedItems={obj_todos[SHOW_COMPLETED].length}
                    onClearCompletedTodo={onClearCompletedTodo}
                    onChangeVisibilityFilter={onChangeVisibilityFilter}/>
                }
            </div>
        );
    }
}

export default TodoApp;
